<template>
  <Panel>
    <template v-slot:header>商品编辑</template>
    <template v-slot:con>
      <el-form ref="editForm" :model="editForm" label-width="120px">
        <el-form-item label="商品名称">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="editForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品评价">
          <el-input v-model="editForm.rating"></el-input>
        </el-form-item>
        <el-form-item label="商品销量">
          <el-input v-model="editForm.sellCount"></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-select v-model="editForm.category" placeholder="请选择活动区域">
            <el-option
              :label="item.cateName"
              :value="item.cateName"
              v-for="item in cate"
              :key="item.cateName"
            ></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品图片">
          <el-upload
            action="http://127.0.0.1:5000/goods/goods_img_upload"
            list-type="picture-card"
            :on-success="handleAvatarSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img :src="dialogImageUrl" alt="" width="120px" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="商品创建时间">
          <el-input v-model="editForm.ctime"></el-input>
        </el-form-item>

        <el-form-item label="商品描述">
          <el-input type="textarea" v-model="editForm.goodsDesc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="editpro">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </template>
  </Panel>
</template>

<script>
import { geteditPro, cateGories, EditPro } from "../../api/pro.js";
export default {
  created() {
    this.geteditpro();
    this.categories();
  },
  data() {
    return {
      id: this.$route.query.id,
      editForm: {},
      cate: [],
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.editForm.imgUrl = res.imgUrl;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    async geteditpro() {
      const { data } = await geteditPro({ id: this.id });
      this.editForm = { ...data[0] };
      console.log(this.editForm);
      console.log(data);
    },
    // 获取分类
    async categories() {
      const { categories } = await cateGories({ id: this.id });
      this.cate = categories;
      console.log(categories);
    },
    // 修改提交
    async editpro() {
      const data = await EditPro(this.editForm);
      if (data.code === 0) {
        this.$message({
          message: data.msg,
          type: "success",
        });
        this.$router.push("/pro/list");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  width: 500px;
  margin-left: 10%;
}
</style>